<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
.main-table td {
	padding: 5px 30px;
	position: absolute;
}

.test-table {
	border: 2px solid #000;
	float: left;
	padding: 10px 40px;
}

.test-table table tr td, .buttom-part table tr td {
	height: 20px;
}

.buttom-part table tr td {
	width: 120px;
}

.test-table ul li, .buttom-part ul li {
	float: left;
	padding: 5px 70px;
	list-style-type: none;
}

.info-table tr td {
	padding: 5px 0px;
}

.info-table tr td input {
	width: 120px;
}

.state-table tr td {
	width: 94px;
}
</style>
</head>

<body>
	<div id="toolbar">
		<input id="butn" type="button" value="打印" onclick="printit();" />
		<!--<div class="main-table">
			<table border="1" cellspacing="0">
				<tr>
					<td colspan="6" align="center">
						<h2>接机单录入</h2>
					</td>
				</tr>
				<tr align="center" class="setlength">
					<td>
						<a href="#">预览</a>
					</td>
					<td>
						<a href="#">打印</a>
					</td>
					<td>
						<a href="#">删除分行</a>
					</td>
					<td>
						<a href="#">出库单打印</a>
					</td>
				</tr>
				<tr>
					<td colspan="6">
						订单号自动生成、店铺名称、店铺地址、店铺联系电话、用户须知条款默认打印页面
					</td>
				</tr>
				<tr>
					<td>维修单号</td>
					<td>终端客户</td>
					<td>大客户</td>
					<td>联系电话</td>
					<td>受理时间</td>
					<td>监测</td>
				</tr>
				<tr>
					<td>客服人员</td>
					<td>取机时间</td>
					<td>开机密码</td>
					<td>维修总金额</td>
					<td>维修人员</td>
					<td>报价</td>
				</tr>
			</table>
		</div>
		<div>
			<table>
				<tr>
					<td><input type="checkbox" /></td>
					<td>维修机型</td>
					<td>IMEI号</td>
					<td>颜色</td>
					<td>故障现象</td>
					<td>数量</td>
					<td>维修配件</td>
					<td>维修费用</td>
					<td>配件价格</td>
					<td>盈利</td>
					<td>保修期限</td>
					<td>备注</td>
					<td>操作</td>
				</tr>
				<tr>
					<td><input type="checkbox" /></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
				</tr>
			</table>
		</div>-->

		<div class="test-table">
			<div class="top-part">
				<center>
					<h2>订单详情</h2>
					<ul>
						<li><a href="#">预览</a></li>
						<li><a href="#">打印</a></li>
						<li><a href="#">删除分行</a></li>
						<li><a href="#">出库单打印</a></li>
					</ul>
				</center>

				<table class="info-table">
					<tr>
						<td>维修单号</td>
						<td><input type="text" /></td>
						<td>终端客户</td>
						<td><input type="text" /></td>
						<td>大客户</td>
						<td><input type="text" /></td>
						<td>联系电话</td>
						<td><input type="text" /></td>
						<td>受理时间</td>
						<td><input type="text" /></td>
						<td>检测</td>
						<td><input type="text" /> <a href="#">操作</a></td>
					</tr>
					<tr>
						<td>客服人员</td>
						<td><input type="text" /></td>
						<td>取机时间</td>
						<td><input type="text" /></td>
						<td>开机密码</td>
						<td><input type="text" /></td>
						<td>维修总金额</td>
						<td><input type="text" /></td>
						<td>维修人员</td>
						<td><input type="text" /></td>
						<td>报价</td>
						<td><input type="text" /> <a href="#">操作</a></td>
					</tr>
				</table>
			</div>

			<div class="middle-part">
				<table class="state-table" border="1" cellspacing="0" id="addstate">
					<tr>
						<!-- <td>维修机型</td>
						<td>IMEI号</td>
						<td>手机品牌</td>
						<td>颜色</td>
						<td>故障现象</td>
						<td>数量</td>
						<td>维修配件</td>
						<td>维修费用</td>
						<td>配件价格</td>
						<td>盈利</td>
						<td>保修期限</td>
						<td>备注</td>
						<td>操作</td> -->
						<th>订单号</th>
						<th>客户姓名</th>
						<th>联系电话</th>
						<th>品牌</th>
						<th>型号</th>
						<th>故障数</th>
						<th>更换配件</th>
						<th>维修费用</th>
						<th>维修状态</th>
						<th>付款状态</th>
						<th>付款方式</th>
						<th>接单人</th>
						<th>维修人</th>
					</tr>
					<tr>
						<td>2010309134323</td>
						<td>于小沫</td>
						<td>13589344332</td>
						<td>OPPO</td>
						<td>R15</td>
						<td>1</td>
						<td>屏幕</td>
						<td>255</td>
						<td>已维修</td>
						<td>已付款</td>
						<td>微信</td>
						<td>李孝利</td>
						<td>曹斯</td>
					</tr>
					<tr>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
					</tr>
					<tr>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
					</tr>
					<tr>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
					</tr>
					<tr>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
					</tr>
					<tr>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
					</tr>
				</table>
				<a href="#" id="addcol">+</a> <a href="#" id="deletecol">-</a>
			</div>

			<div class="buttom-part">
				<ul>
					<li><a href="#">配件出库单</a></li>
					<li><a href="#">成本合计</a></li>
					<li><a href="#">成本修改</a></li>
					<li><a href="#">删除分行</a></li>
				</ul>
				<br /> <br />
				<table class="peijian-table" border="1" cellspacing="0">
					<tr>
						<td>配件品称</td>
						<td>型号/规格</td>
						<td>数量</td>
						<td>单位</td>
						<td>单价</td>
						<td>金额</td>
					</tr>
					<tr>
						<td>屏幕</td>
						<td>OPPO</td>
						<td>1</td>
						<td>块</td>
						<td>80</td>
						<td>120.0</td>
					</tr>
					<tr>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
					</tr>
					<tr>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
					</tr>
					<tr>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
					</tr>
					<tr>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
					</tr>
				</table>

				<ul>
					<li><a href="#">添加</a></li>
					<li><a href="#">保存</a></li>
					<li><a href="#">取消</a></li>
					<li><a href="#">删除</a></li>
				</ul>

				<div class="choosetype">
					取机类别： <select>
						<option value="-1">请选择</option>
						<option value="0">维修完成</option>
						<option value="1">无故障机</option>
						<option value="2">不维修机</option>
					</select> 付款方式： <select>
						<option value="-1">请选择</option>
						<option value="0">现金</option>
						<option value="1">微信</option>
						<option value="2">支付宝</option>
						<option value="2">转账</option>
						<option value="2">挂账</option>
					</select>
				</div>
			</div>
		</div>
	</div>
</body>
<script src="js/jquery-1.12.4.js"></script>
<script type="text/javascript">
	$("#addcol")
			.on(
					"click",
					function() {
						var table = document.getElementById("addstate");
						var num = table.rows.length;
						var A_tr = '<tr><td>'
								+ num
								+ '</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td><a href="#"></a></td>';
						$("#addstate").append(A_tr);
					});

	$("#deletecol").on("click", function() {
		if (confirm("确定删除？")) {

		}
	});

	function printit() {
		if (confirm('确认打印吗？')) {
			document.getElementById('butn').style.display = "none"; //隐藏
			window.print(); //打印
			document.getElementById('butn').style.display = "inline"; //显示
		}
	}
</script>
</html>